<template>
    <div class="tixian_content">
      <jm-head ref="head"></jm-head>
        <div>
            <van-cell
                :title="bankName"
                :label="label"
                :is-link="true"
                center
                @click="$router.push({path: 'bank', query: {type: 'select'}})"
            >
            </van-cell>
            <div class="fgx_img">
                <img src="@/assets/img/fgx.jpg" alt="分割线">
            </div>
        </div>
         <div class="tixian_menu box">
            <h2>提醒：您当前的余额：{{gold}}元</h2>
            <input class="tx_money_input box" type="number" v-model="withdraw" placeholder="请输入您需要提现的金额，必须大于2元">
            <div class="tx_shouxufei box">
                <p class="fl">提现手续费：{{fee}}元</p>
                <p class="fr">全部提现</p>
            </div>
            <button class="sumb_btn" @click="withdrawFunc">提交申请</button>
            <div class="tx_tips">
                <p class="box red">每周六处理上周六至本周五的所有提现申请，提现到账时间为1-2个工作日；</p>
                <p class="box">充值如果要提现需要收取0.6%提现手续费+1元服务费/每笔（微信收取）；</p>
                <p class="box">POS、信用卡充值无法提现；</p>
                <p class="box">最大单笔提现金额，以提现卡银行具体规定为准；</p>
                <p class="box">没有填写开行信息的用户请在银行卡信息中填写开户行信息，提现姓名和账户姓名必须相同且为真实姓名，否则可能造成提现失败。</p>
            </div>
         </div>
    </div>
</template>
<script>
    import Vue from 'vue'
    import { initWithdraw, withdraw } from "@/api/bank";
    import Cookies from 'js-cookie'
    import { Toast } from 'vant'
    import JmHead from '../head/head'
    import { Cell } from 'vant';

    Vue.use(Cell)
    export default {
        name: 'tixian',
        components: {
            JmHead
        },
        data () {
            return {
                bankId: '',
                gold: 0,
                withdraw: '',
                bankName: '提现必须设置银行卡',
                label: '',
                true_name: ''
            }
        },
        computed: {
            fee () {
                if (this.withdraw === '') {
                    return 0
                }
                var fee = +(this.withdraw * 0.006).toFixed(2)
                return (1 + fee).toFixed(2)
            }
        },
        methods: {
            initWithdraw() {
                initWithdraw({id: this.bankId}).then(res => {
                    this.gold = res.data.gold / 100
                    this.true_name = res.data.true_name
                    if (res.data.bank !== null) {
                        this.bankName = res.data.bank.bank_name
                        this.label = "尾号" + res.data.bank.bank_code.slice(-4) + "储蓄卡"
                        this.bankId = res.data.bank.id
                    }
                })
            },
            withdrawFunc() {
              if (this.true_name === '') {
                  // this.$router.push({path: '/setting/name'})
                  this.$router.replace({path: '/setting/name'})
                  return
              }
                if(this.bankId === '') {
                    Toast.fail({message: '提现必须设置银行卡', duration: 2000})
                    return
                }
                if(this.widthdraw === '' || this.withdraw<2) {
                    Toast.fail({message: '提现金额不得少于2元', duration: 2000})
                    return
                }
                withdraw({id: this.bankId, withdraw: this.withdraw}).then(res => {
                    if(res.code === 20000) {
                      Toast.success({message: '已申请', duration: 2000})
                      this.$router.replace({path: '/gold'})
                    }else{
                      Toast.fail({message: res.info, duration: 2000})
                    }
                })
            }
        },
        activated() {
            this.withdraw = ''
            this.bankId = Cookies.get('bankId') || ''
            this.initWithdraw()
            this.$refs.head.setNavBarUrl()
        },

        destroyed() {
            console.log('销毁')
        }
    }
</script>

<style lang="stylus" scoped>
    .tixian_content
        width 100%
        height 100%
        overflow hidden
        background #f5f5f5
        .tixian_header
            background #ffffff
            padding .1rem .3rem
            overflow hidden
            p
                color #8c8989
                font-size .26rem
                line-height .6rem
                padding-left .4rem
                background url(//img.haoyunbang.cn/m/img/ico_mobil_hp_address_01.png) no-repeat;
                background-size .3rem
                background-position: 0 center

            button
                display block
                border  1px solid #eee
                width 1.4rem
                color #7c7a7a
                text-align center
                line-height .6rem
                border-radius 4px
                font-size .28rem
                background #ffffff
        .fgx_div
            width 100%
            overflow hidden
            background #fff
            img
                width 100%
        .tixian_menu
            padding 0 .3rem
            width 100%
            overflow hidden
            background #fff
            h2
                font-size .28rem
                color #000
                line-height .4rem
                padding .3rem 0
                width 100%
                overflow hidden
            .tx_money_input
                border 1px solid #cccccc
                border-radius 4px
                text-align left
                display block
                width 100%
                height .8rem
                line-height .8rem
                font-size .28rem
                color #000
                background #fff
                padding 0 .3rem
                &::-webkit-input-placeholder
                    color #7c7a7a
                    font-size .28rem
                    text-align left
            .tx_shouxufei
                padding .2rem 0
                width 100%
                overflow hidden
                .fl
                    color #8c8989
                    font-size .24rem
                    line-height .4rem
                .fr
                    font-size .26rem
                    line-height .4rem
                    color #4395ff
            .sumb_btn
                width 100%
                border 1px solid #3385ff
                background #3385ff
                line-height .9rem
                height .9rem
                font-size .36rem
                color #fff
                border-radius 6px
                display block
                text-align center
            .tx_tips
                width 100%
                padding .3rem 0
                background #ffffff
                overflow hidden
                p
                    width 100%
                    overflow hidden
                    position relative
                    line-height .4rem
                    padding-left .3rem
                    margin-bottom .1rem
                    color #747272
                    font-size .26rem
                    &:after
                        content ''
                        position absolute
                        top .14rem
                        left 0
                        width .14rem
                        height .14rem
                        background #3385ff
                        border-radius 50%
                .red
                    color red



</style>
